<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.menu{
			height: 80px;
			width: 960px;
			background-color: pink;
			position: fixed;
			top: 0px;
			/*margin: 0px auto  定位元素不能用margin进行居中设置*/
			left: 50%;
			margin-left: -480px;
		}

		p{
			text-align: center;
		}

		.popup{
			width: 500px;
			height: 300px;
			border: 1px solid #000;
			background-color: #fff;

			position: fixed;
			left: 50%;
			margin-left: -250px;

			top: 50%;
			margin-top: -150px;	

			z-index: 999;		
		}

		.popup h2{
			background-color: purple;
			margin: 10px;
			height: 40px;
		}

		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #000;
			
			left:0;
			top:0;
		   	opacity: 0.5;

		   	z-index: 998;
		}

		.pop_con{
			display: none;
			/*display: block;*/
		}

	</style>
	
	<script type="text/javascript">
		window.onload = function(){

		var oDiv = document.getElementById('pop');

		setTimeout(function(){
			oDiv.style.display = 'block';
		},3000)

	}

	</script>
</head>
<body>
	<div class="menu">菜单文字</div>
	<div class="pop_con" id="pop">
		<div class="popup"> 
			<h2>弹框</h2>
		</div>
		<div class="mask"></div>
	</div>






	<p>网页文字</p>
	<br>
	<br>
	<p>网页文字</p>
	<br>
	<br>
	<p>网页文字</p>
	<br>
	<br>
	<p>网页文字</p>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>

		<p>网页文字</p>
	<br>
	<br>
		<p>网页文字</p>
	<br>
	<br>
</body>
</html>